<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/bootstrap.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        a:hover {
            text-decoration: none;
            color: #fff;
        }

        a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
        }

        .container {
            margin: 20px auto;
            width: 1200px;
        }
        body{
            background:#eee;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <template id="txt">
        <div class="container">
            <el-table :data="users" style="width: 100%">
                <el-table-column prop="id" label="编号" width="180">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="180">
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="180">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="180">
                </el-table-column>
                <el-table-column label="操作" width="180 ">
                    <div slot-scope="scope">
                        <el-button @click="del(scope.row.id)" type="danger">删除</el-button>
                        <el-button type="info"><a :href="'/update.html#'+scope.row.id">编辑</a></el-button>
                    </div>
                </el-table-column>
            </el-table>
            <com-1></com-1>
        </div>
    </template>
    <template id="x2">
        <div>
            <button class="btn btn-success"><a href="/add.html">添加</a></button>
        </div>
    </template>
</body>
<script src="/vue.min.js "></script>
<script src="jquery.min.js "></script>
<script src="https://unpkg.com/element-ui/lib/index.js "></script>
<script>
    var vm = new Vue({
        el: '#app',
        template: '#txt',
        data: function () {
            return {
                users: []
                
            }
        },
        components: {
            'com-1': {
                template: '#x2'
            }
        },
        created: function () {
            this.getUsers()
        },
        methods: {
            getUsers: function () {
                var _this = this
                $.get('/users').done(function (result) {
                    _this.users = result
                })
            },
            del: function (id) {
                var _this = this
                $.get('/users/del', { id: id }).done(function () {
                    _this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function(){
                        location.reload()
                    })
                        
                   

                    
                })

            },

        }
    })
</script>

</html>